<!DOCTYPE html><!--  Last Published: Wed Mar 20 2024 14:50:20 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="65fade445392fbfe725cbc79" data-wf-site="657c661418a503e0b43c9905">
<head>
  <meta charset="utf-8">
  <title>导入页面</title>
  <meta content="导入页面" property="og:title">
  <meta content="导入页面" property="twitter:title">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="../css/normalize.css" rel="stylesheet" type="text/css">
  <link href="../css/webflow.css" rel="stylesheet" type="text/css">
  <link href="../css/shikais-stunning-site.webflow.css" rel="stylesheet" type="text/css">
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="../images/favicon.png" rel="shortcut icon" type="image/x-icon">
  <link href="../images/webclip.png" rel="apple-touch-icon">
</head>
<body>

  <section id="vue-root">
    <!-- 头部导航栏 -->
    <header class="header">
      <div class="header-title">xxxxxxx</div>
      <div class="user-profile">
        <img src="https://uploads-ssl.webflow.com/657c661418a503e0b43c9905/658117b40cdfe876cc4d9008_weixintouxiang_lsk.jpg" alt="用户头像" class="user-avatar">
        <div class="user-menu">退出登录</div>
      </div>
    </header>
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div class="nav-item" :class="{active: activeComponent === 'upload'}" @click="setActiveComponent('upload')">当前光路上传</div>
      <div class="nav-item" :class="{active: activeComponent === 'query'}" @click="setActiveComponent('query')">光缆光路查询</div>
      <div class="nav-item" :class="{active: activeComponent === 'stats'}" @click="setActiveComponent('stats')">光缆光路统计</div>
      <div class="nav-item" :class="{active: activeComponent === 'analysis'}" @click="setActiveComponent('analysis')">光路故障分析</div>
      <!-- 更多导航项 -->
    </div>

    <div class="main-content">


      <div v-show="activeComponent === 'upload'">
        <!-- 上传页面的内容 -->

        <div class="w-layout-blockcontainer w-container">
          <div class="zidongbuquandaoru w-embed">
            <div >
              <input type="text" v-model="inputContent" placeholder="输入内容进行搜索...">
              <ul v-if="filteredGuanglus.length">
                <li v-for="(guanglu, index) in filteredGuanglus" :key="index" @click="selectGuanglu(guanglu)">
                  {{ guanglu }}
                </li>
              </ul>
              <!--  文件选择  -->
              <input type="file" @change="handleFileUpload">
              <!--  上传按钮  -->
              <button @click="uploadFile">上传文件</button>
              <span v-if="uploadFileName">待上传文件名: {{ uploadFileName + '.xlsx' }}</span>
            </div>
          </div>
        </div>



      </div>


      <div v-show="activeComponent === 'query'">
        <!-- 查询页面的内容 -->
        <div class="search-container">
          <input type="text" v-model="searchQuery" placeholder="输入搜索内容...">
          <button @click="searchData">搜索</button>
        </div>
        <div class="results-container">
          <table>
            <tr>
              <th>ID</th>
              <th>Location</th>
              <th>Status</th>
              <!-- 添加其他列标题 -->
            </tr>
            <tr v-for="item in searchResults" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.location }}</td>
              <td>{{ item.status }}</td>
              <!-- 添加其他列数据 -->
            </tr>
          </table>
        </div>
      </div>

      <div v-show="activeComponent === 'stats'">
        <!-- 统计页面的内容 -->
      </div>
      <div v-show="activeComponent === 'analysis'">
        <!-- 分析页面的内容 -->
      </div>
    </div>


  </section>
  <div class="jiazaixiangmu w-embed w-script">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    //本地的vue地址
    <script src="http://localhost:8080/shikais-stunning-site.webflow-0307/js/xiamen_daoru.js"></script>
  </div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=657c661418a503e0b43c9905" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="../js/webflow.js" type="text/javascript"></script>
</body>
</html>
<style>
  /* 全局样式 */
  body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #f5f7f9;
    color: #333;
    line-height: 1.6;
  }

  /* 容器样式 */
  .w-layout-blockcontainer {
    max-width: 800px;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }

  /* 输入框样式 */
  input[type="text"] {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
  }

  /* 文件上传输入框 */
  input[type="file"] {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #eef1f5;
    box-sizing: border-box;
  }

  /* 上传按钮样式 */
  button {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
  }

  button:hover {
    background-color: #45a049;
  }

  /* 待上传文件名显示样式 */
  span {
    display: block;
    margin-top: 20px;
    color: #666;
    font-size: 14px;
  }

  /* 列表样式 */
  ul {
    list-style: none;
    padding: 0;
  }

  li {
    padding: 10px;
    background-color: #eef1f5;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
  }

  li:hover {
    background-color: #ddd;
  }

  /* 左侧导航栏样式 */
  .sidebar {
    position: fixed; /* 固定位置 */
    left: 0;
    top: 0;
    width: 200px; /* 导航栏宽度 */
    height: 100%;
    background-color: #2c3e50; /* 导航栏背景颜色 */
    color: white;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }

  .nav-item {
    padding: 20px;
    border-bottom: 1px solid #34495e;
  }

  .nav-item.active {
    background-color: #1abc9c; /* 活动导航项的背景颜色 */
  }

  /* 调整主体内容的左边距，避免与导航栏重叠 */
  .w-layout-blockcontainer {
    margin-left: 200px; /* 应等于导航栏宽度 */
  }





  /* 头部导航栏样式 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f5f7f9; /* 与效果图一致的浅色背景 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 给头部加上轻微的阴影 */
  }

  .header-title {
    font-size: 24px;
    color: #333; /* 标题颜色，根据效果图调整 */
  }

  .user-profile {
    position: relative;
    display: inline-block;
  }

  .user-avatar {
    width: 50px; /* 头像大小，根据效果图调整 */
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
  }

  .user-menu {
    display: none;
    position: absolute;
    right: 10px;
    top: 60px; /* 调整以适应头像的位置 */
    background-color: #ffffff;
    color: #333;
    padding: 5px 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 给菜单加上轻微的阴影 */
    z-index: 1000; /* 确保菜单在其他元素之上 */
  }

  .user-profile:hover .user-menu {
    display: block; /* 鼠标悬停时显示菜单 */
  }

  /* 省略了其它样式 */


  /* Sidebar */
  .sidebar{
    padding-top:69px;
  }
  .nav-item.active {
    background-color: #1abc9c; /* 修改为您希望的激活状态颜色 */
  }


  /* 上传页面容器样式 */
  div[v-show="activeComponent === 'upload'"] {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 使div占满视口高度 */
  }

  /* 上传内容的宽度和最大宽度 */
  .w-layout-blockcontainer {
    width: 100%; /* 占满容器宽度 */
    max-width: 800px; /* 最大宽度，根据需要调整 */
    margin: auto; /* 自动边距确保水平居中 */
    padding: 20px; /* 内边距 */
  }

  /* 保持其他样式不变 */


</style>